<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">
	
	<!-- CSS to style the autocomplete feature -->
	<link rel="stylesheet"
		href="${resource(dir:'css',file:'guidely.css')}" type="text/css" />
</head>
<body>
	<div class="page-header">
		<h1>
			<g:message code="cart.title" />
		</h1>
	</div>
	
	<g:if test="${flash.message}">
		<div class="alert alert-success">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.message}</div>  
		</div>  
	</g:if>

	<div id="clientValidationMessage" class="alert alert-error hidden">
		<a class="close" data-dismiss="alert">×</a>
		<div class="message">
			<g:message code="cart.clientValidationMessage" />
		</div>
	</div>

	<g:noPhotographersItems>
		<div class="alert alert-warning">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message"><g:message code="cart.noElements" /></div>  
		</div>  
	</g:noPhotographersItems>
			
	<g:manyPhotographersItems>
		<div id="photographerSelectionContainer">
			<div >
				<h4><g:message code="cart.select.photographer" /></h4>
				<g:form controller="shoppingCart" action="show" class="form-horizontal">					
					<div class="control-group">
						<label class="control-label" for="price"><g:message code="cart.photographer" /></label>
							<div class="controls">
								<g:select name="photographerId" 
										  id="photographerSelect"
										  value="${photographer?.id}" 
										  optionKey="id" from="${photographers}" 
										  onchange="submit()"/>
							</div>
					</div>							
				</g:form>
			</div>
		</div>
		
		<div class="separatorUsingBorder"></div>
	</g:manyPhotographersItems>	
			
	<g:oneOrManyPhotographersItems>
		<div id="headerContainer" class="row">

			<div id="defectContainer" class="span6">
				<h4 ><g:message code="cart.configuration.default" /></h4>							
				<div id="defectContainerHelp" class="titleDescriptionWithoutBorder"><p><g:message code="cart.configuration.default.description"/></p></div>
			</div>

			<div id="orderSummaryContainer" class="span6">
				<h4><g:message code="cart.purchase.description" /></h4>	
				
				<div  class="form-horizontal">
							
					<div class="control-group">
						<label class="control-label" for="totalPhotos"><g:message code="cart.purchase.total.quantity" /></label>
						<div class="controls">
							<input type="text" id="txt_totalCopies" class="span2" disabled>
						</div>
					</div>
					
					<div class="control-group">
						<label class="control-label" for="price"><g:message code="cart.purchase.total.price" /></label>
						<div class="controls">
							<input type="text" id="txt_orderPrice" class="span2 orderPrice" disabled>
							<img id="btnCheckPrices" src="${resource(dir:'images', file: 'question_icon_s.png')}" data-toggle="modal" data-target="#pricesModal">
						</div>
					</div>
					
					<div class="control-group">
						<label class="control-label" for="price"><g:message code="cart.purchase.price.min" /></label>
						<div class="controls">
							<input type="text" id="txt_minPrice" class="span2" value="${photographer.minOrderCost}" disabled>									
						</div>
					</div>
							
					<g:form name="orderForm" controller="shoppingCart" action="order">		
						<g:hiddenField name="order" />
					</g:form>
					
					<g:form name="deleteForm" controller="shoppingCart" action="emptyShoppingCart">		
						<g:hiddenField name="photographerCartToBeDeleted" value="${photographer.id}"/>
					</g:form>
							
					<div class="row centered">			
						
						<button class="btn btn-danger delete" data-toggle="modal" data-target="#deleteModal" style="display:none;">
							<g:message code="cart.empty" />
						</button>
						
						<button id="btnHelp" class="btn btn-info " >
							<g:message code="help" />
						</button>
						
						<button id="btnOrder" class="btn btn-success " data-toggle="modal" data-target="#orderPopup">
							<g:message code="continue" />
						</button>						
																
					</div>						
				</div>
			</div>
		</div>
		
		<div class="separatorUsingBorder"></div>
	
		<h2>
			<g:message code="cart.photos" />
		</h2>
					
		<form id="allPhotosContainerForm">								
			<div id="allPhotosContainer" data-toggle="modal-gallery" data-target="#modal-gallery" ></div>
			
		</form>
		
		<div id="noPhotosInCart" class="alert alert-warning hidden">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message"><g:message code="cart.noElements" /></div>  
		</div>
						
	</g:oneOrManyPhotographersItems>
	
	<div class="separator"></div>
		
	<script type="text/javascript">
		jQuery(document).ready(function(){																	

			var i18nMessages = {};
			
			i18nMessages['cart.configuration.default2'] = '${message(code: 'cart.configuration.default2')}'
			i18nMessages['cart.copies'] = '${message(code: 'cart.copies')}'
			i18nMessages['cart.size'] = '${message(code: 'cart.size')}'
			i18nMessages['cart.paper'] = '${message(code: 'cart.paper')}'
			i18nMessages['cart.border'] = '${message(code: 'cart.border')}' 
			i18nMessages['cart.format.incorrect'] = '${message(code: 'cart.format.incorrect')}'
			i18nMessages['cart.field.required'] = '${message(code: 'cart.field.required')}'
			i18nMessages['cart.date.invalid'] = '${message(code: 'cart.date.invalid')}'
			i18nMessages['cart.email.invalid'] = '${message(code: 'cart.email.invalid')}'
			i18nMessages['cart.url.invalid'] = '${message(code: 'cart.url.invalid')}'
			i18nMessages['cart.number.invalid'] = '${message(code: 'cart.number.invalid')}'
			i18nMessages['delete'] = '${message(code: 'delete')}'
			
			var refreshPostingUrl = "${createLink(action: 'calculatePrice')}";
			var removePhotoFromCartPostingUrl = "${createLink(action: 'removePhoto')}";
			var createCheckoutPostingUrl = "${createLink(action: 'createPreference')}";					
			shoppingCartController = new ShoppingCartController(refreshPostingUrl,removePhotoFromCartPostingUrl, createCheckoutPostingUrl, i18nMessages);

			jQuery('#btn_deleteConfirm').click(function () {								
				jQuery('#deleteForm').submit();
			});

			jQuery('#btn_orderConfirm').click(function () {								
				var errorsFound = jQuery('#allPhotosContainerForm').find('input.error');															 					
				if (errorsFound.size() == 0){
					shoppingCartController.fillOrder();								
					jQuery('#orderForm').submit();
				}		
				else {
					jQuery('#clientValidationMessage').removeClass('hidden');
				}
			});	
		
			shoppingCartController.addSizes(${sizes});
			shoppingCartController.addPaperBorders(${borders});
			shoppingCartController.addPaperTypes(${paperTypes});
			shoppingCartController.initDefectContainer();			
			shoppingCartController.addPhotos(${photos});				
		});
	</script>

	<g:oneOrManyPhotographersItems>	
		<script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery('#btnHelp').click(function () {													
					initGuidely();			
				});	
								
				function initGuidely(){		

					guidely.clear();
					
					jQuery('#guidelyContainer').remove();
					jQuery('body').append('<div id="guidelyContainer"></div>');

					guidely.add ({
						attachTo: '#orderSummaryContainer'
						, anchor: 'top-left'
						, title: 'Resumen de la compra'
						, text: 'Observe el precio del pedido mientras va personalizando su compra!'
					});

					var checkPricesIconUrl = "${resource(dir:'images', file: 'question_icon_s.png')}";
					guidely.add ({
						attachTo: '#btnCheckPrices'
						, anchor: 'bottom-right'
						, title: 'Consulte los precios'
						, text: 'Presione el botón '+
								'<img src="'+ checkPricesIconUrl+'"/>' +
								' para consultar el precio de cada foto!'
					});			 	

					
					guidely.add ({
						attachTo: '#defectContainerHelp'
						, anchor: 'middle-left'
						, title: 'Configuración por Defecto'
						, text: 'Todas las fotos en el pedido comienzan con una configuración común. Por ejemplo, si se establece un tamaño por defecto de 13x18, todas las fotos del pedido se actualizan a ese tamaño.'
					});

					if(shoppingCartController.getDefectCheckBoxIdFirstImage()!=null){
						guidely.add ({
							attachTo: '#'+shoppingCartController.getDefectCheckBoxIdFirstImage()
							, anchor: 'bottom-middle'
							, title: 'Anular configuración por defecto'
							, text: 'Presione el botón ' + 
									'<input type="checkbox" checked  style="margin-bottom: 5px;" disabled/>' + 
									' para poder seleccionar para la foto un tamaño, papel o borde distinto al de la configuración por defecto!'
						});
					}

					var newPhotoIconUrl = "${resource(dir:'images', file: 'plus_icon.png')}";
					if( shoppingCartController.getAddNewCopyIdFirstImage() != null){
						guidely.add ({
							attachTo: '#'+shoppingCartController.getAddNewCopyIdFirstImage()
							, anchor: 'top-right'
							, title: 'Copiar fila'
							, text: 'Presione el botón ' +
									'<img src="'+ newPhotoIconUrl+'"/>' +
									' para hacer una copia de la fila de la foto. De esta forma podrá encargar una misma foto en diferentes tamaños!'
						});
					}
										
					guidely.init ({ 
						welcome: true,
						welcomeTitle: 'Bienvenido!',
						welcomeText: 'Presione Comenzar para hacer un recorrido a través de su carro de compras y de esta forma personalizar al máximo su pedido ',						
						startTrigger: false });
				}					
			});
		</script>	
	</g:oneOrManyPhotographersItems>
		
	<g:render template="/common/deleteConfirmationPopup" model='[button_text:"${message(code: 'cart.empty')}", msg:"${message(code: 'cart.empty.message')}"]'/>
	<g:render template="/common/successConfirmationPopup" model='[button_text:"${message(code: 'continue')}", msg:"${message(code: 'continue.message')}", popup_id:"orderPopup", button_id:"btn_orderConfirm"]'/>
	
	<g:render template="shoppingCartController" />	
	<g:render template="/shoppingCart/matteVsGlossyPopup" />
	<g:render template="/shoppingCart/borderPopup" />
	<g:render template="/shoppingCart/pricesPopup" />
	
	<g:render template="/common/modalImageGallery" model="${[addToCartVisibility: false]}" />
		
	<g:javascript src="jquery.validate.js" />
	
	<g:javascript src="model/Photo.js" />
	<g:javascript src="model/ShoppingCart.js" />
	<g:javascript src="model/Size.js" />
	<g:javascript src="model/PaperBorder.js" />
	<g:javascript src="model/PaperType.js" />
	<g:javascript src="model/OrderItem.js" />	
	<g:javascript src="imagePreview.js" />	
	<g:javascript src="guidely.js" />
</body>
</html>